<template>
	<view class="container">
		<view class="header">
			<view class="top">
				<view class="arrow" @tap="back()"><image src="../../static/images/arrow_left.png" mode="aspectFit"></image></view>
				<view class="tit f36 cfff">盘点</view>
				<view class="btn"><image src="../../static/images/tb_scan.png" mode="aspectFit"></image></view>
			</view>
			<view class="search-box">
				<view class="icon"><image src="../../static/images/tb_search.png" mode="aspectFit"></image></view>
				<input placeholder="请输入编码/名称搜索货品..." placeholder-style="color:#999;" @focus="goGoods()" />
			</view>
		</view>

		<view class="inventoryList">
			<view class="inventory-item" v-for="(item, index) in inventoryList" :key="index">
				<view class="box">
					<view class="left">
						<view class="pic">
							<dimg :src="item.cover" ></dimg>
							</view>
						<view class="text">
							<view class="name f30 c333">{{ item.title }}</view>
							<view class="number f28 c333">盘点数：{{ counts }}</view>
						</view>
					</view>
					<view class="right">
						<view class="delete" @tap="deleteBtn(index)"><image src="../../static/images/icon_delete.png" mode="aspectFit"></image></view>
						<view class="arrow" @tap="changeImg(index)">
							<view class="text f28">{{ item.isok ? '展开' : '收起' }}</view>
							<image src="../../static/images/arrow_down.png" mode="aspectFit" v-show="!item.isok"></image>
							<image src="../../static/images/arrow_ondown.png" mode="aspectFit" v-show="item.isok"></image>
						</view>
					</view>
				</view>

				<view class="dropList" v-show="item.isok">
					<view class="title">
						<view class="f28 c333">规格</view>
						<view class="f28 c333">盘点库存数量</view>
					</view>

					<view class="drop-item" v-for="(i, sub) in item.product_list" :key="sub">
						<view class="spec f28 c666">
							<block v-for="(val, valIndex) in i.spec_data" :key="valIndex">
								{{ val }}
								<block v-if="valIndex < i.spec_data.length - 1">/</block>
							</block>
						</view>
						<view class="changeNum"><stepper size="small" :min="1" :max="20" :childindex="sub" @change="changeNum"></stepper></view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 110upx;"></view>
		<view class="submitBox">
			<view class="left">
				<view class="number f28 c333">总盘点数：{{ counts }}</view>
				<view class="money f30 c666">共{{ inventoryList.length }}种货品</view>
			</view>
			<view class="right"><view class="btn f30 cfff" @tap="saveBtn()">确认保存</view></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			inventoryList: [],
			productList: '',
			counts: 0,
			array: [] //累加后的数组
		};
	},
	onShow() {
		let that = this;
		this.productList = uni.getStorageSync('pandian');
		if (that.productList != '') {
			that.inventoryList = [that.productList];
		}

		this.inventoryList[0].product_list.forEach(item => {
			item.operate_num = 0;
		});
	},
	onLoad(option) {
		let that = this;
		// if(option.item!=undefined){
		// 	that.productList=JSON.parse(option.item);
		// }
		//    that.inventoryList=[that.productList]
		// console.log(that.inventoryList)
		// that.inventoryList = [
		// 	{
		// 		pic: '../../static/images/201916541220.jpg',
		// 		name: '3542763(商品名称）',
		// 		number: '2'
		// 	},

		// ],
		that.inventoryList.map((item, index) => {
			that.inventoryList[index].isok = false;
		});
	},
	methods: {
		//数量累加
		changeNum(e) {
			this.inventoryList[0].product_list[+e.childindex].operate_num = +e.num;
			let c = 0;
			this.inventoryList[0].product_list.forEach(item => {
				c = +item.operate_num + c;
			});
			this.counts = c;
		},

		changeImg(index) {
			let List = this.inventoryList;
			List[index].isok = !List[index].isok;
			this.inventoryList = List;
			this.$set(this.inventoryList, index, List[index]);
		},

		goGoods() {
			uni.navigateTo({
				url: './inventorySearch'
			});
		},
		deleteBtn(index) {
			let that = this;
			uni.showModal({
				title: '温馨提示!',
				content: '确认要删除货品吗?',
				success: function(res) {
					if (res.confirm) {
						that.inventoryList.splice(index, 1);
					} else if (res.cancel) {
					}
				}
			});
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		//提交
		saveBtn() {
			let that = this;
			this.array = this.inventoryList[0].product_list;
			this.array.forEach(item => {
				delete item.spec_data;
				delete item.sell_price;
				delete item.cost_price;
				delete item.store_num;
				delete item.owe_num;
				delete item.sale_num;
				delete item.trade_sum;
				delete item.unit_id;
				delete item.unit_name;
				delete item.convert_num;
			});
			console.log(this.array);

			uni.request({
				url: getApp().globalData.apiurl + '/api/v1.inventory/save', //仅为示例，并非真实接口地址。
				data: {
					0: JSON.stringify(this.array)
				},
				method: 'POST',
				header: {
					'content-type': 'application/json',
					token: uni.getStorageSync('userinfo').token
				},
				success: res => {
					uni.showToast({
						title: '盘点成功',
						icon: 'none'
					});

					setTimeout(function() {
						uni.navigateTo({
							url: './keepsheet'
						});
					}, 1500);
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.header {
	background-color: #249af6;
	padding: 40upx 30upx 20upx 30upx;
	.top {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.arrow {
			image {
				width: 20upx;
				height: 40upx;
			}
		}

		.btn {
			image {
				width: 44upx;
				height: 44px;
			}
		}
	}
	.search-box {
		height: 60upx;
		line-height: 60upx;
		background-color: $white-background;
		border-radius: 30upx;
		display: flex;
		flex-direction: row;
		.icon {
			margin-left: 30upx;
			image {
				width: 31upx;
				height: 28upx;
			}
		}
		input {
			width: 100%;
			box-sizing: border-box;
			padding: 0 25upx;
			height: 60upx;
			line-height: 60upx;
			font-size: 28upx;
			color: #999;
		}
	}
}

.inventoryList {
	.inventory-item {
		margin-bottom: 20upx;
		.box {
			padding: 40upx 30upx;
			background-color: $white-background;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.left {
				display: flex;
				flex-direction: row;
				.text {
					padding: 10upx 0;
					.name {
						margin-bottom: 40upx;
					}
				}
				.pic {
					width: 130upx;
					height: 130upx;
					margin-right: 20upx;
					image {
						width: 130upx;
						height: 130upx;
					}
				}
			}
			.right {
				padding: 10upx 0;
				.delete {
					image {
						width: 36upx;
						height: 35upx;
						float: right;
					}
					margin-bottom: 38upx;
					overflow: hidden;
				}
				.arrow {
					display: flex;
					flex-direction: row;
					align-items: center;
					.text {
						color: #249af6;
					}
					image {
						width: 17upx;
						height: 10upx;
						vertical-align: middle;
						margin-left: 10upx;
					}
				}
			}
		}
		.dropList {
			background-color: #efefef;
			.title {
				display: flex;
				flex-direction: row;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 2upx #ddd solid;
				view {
					width: 50%;
					text-align: center;
				}
			}
			.drop-item {
				height: 100upx;
				line-height: 100upx;
				border-bottom: 2upx #ddd solid;
				&:last-child {
					border-bottom: none;
				}
				display: flex;
				flex-direction: row;
				.spec {
					width: 50%;
					text-align: center;
				}
				.changeNum {
					width: 50%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					margin-top: 30upx;
				}
			}
		}
	}
}
.submitBox {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	background-color: $white-background;
	height: 110upx;
	.left {
		padding: 20upx 0 0 30upx;
	}
	.right {
		width: 260upx;
		background-color: #249af6;
		text-align: center;
		line-height: 110upx;
	}
}
</style>
